<!--
 * @Author: your name
 * @Date: 2022-01-05 19:59:44
 * @LastEditTime: 2022-01-06 11:10:59
 * @LastEditors: HeAo
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \briup-webui-1group-teamwork\am-ui\src\pages\am\monitor\Video.vue
-->

<template>
  <div class="Video">
    <div class="left">
      <el-tree
        :data="edTree"
        :props="props"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="right">
      <div v-if="params.device_id">
        <video
          controls="controls"
          muted="muted"
          autoplay="autoplay"
          loop="loop"
          src="http://47.101.184.44/video/1.mp4"
        ></video>
      </div>
      <div v-else class="notice">
        该设备暂无数据，请检查设备是否处于开启状态
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      edTree: [],
      props: {
        label: "name",
        value: "id",
      },
      params: {
        page: 1,
        pageSize: 50,
      },
      children: [],
      todayData: {},
    };
  },
  methods: {
    // 树节点击按钮
    handleNodeClick(data) {
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id,
        };
        // 调用请求数据的方法
      }
    },
    // 查询工程设备树
    findeEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.edTree = res.data;
        this.children = res.data.children;
      });
    },
  },
  mounted() {
    this.findeEngineerDeviceTree();
  },
};
</script>
<style scoped>
.Video {
  display: flex;
}
.left {
  width: 30%;
}
.right {
  width: 70%;
}
.notice {
  font-size: 30px;
  text-align: center;
}
.right video {
  width: 500px;
  height: 400px;
  margin-left: 200px;
}
</style>

